<template>
  <div>
    <el-dialog :title="title" :width="width" class="icon-dialog" top="6vh" :visible.sync="show" @open="open" :close-on-click-modal="false" :before-close="closeForm" append-to-body>
      <el-form :model="form" :rules="formRules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="title">
          {{form.title}}
        </el-form-item>
        <el-form-item label="节点" prop="node_ids">
          <el-table
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              v-loading="loading"
              highlight-current-row
              :default-expand-all="expand"
              @current-change="handleCurrentChange"
              :tree-props="{children: 'children'}"
              row-key="id" ref="multipleTable"
              border
              class="eltable"
              :data="list"   style="width: 100%"  >
            <el-table-column  property="id" align="center" type='' label="编号" width="70"></el-table-column>
            <el-table-column  property="title"  label="菜单名称" width="160">
            </el-table-column>
            <el-table-column  property="" align="center" type='' label="节点列表">
              <template slot-scope="scope">
                <el-tag
                    v-for="node in scope.row.node"
                    :key="node.id">
                  {{node.name}}&nbsp;<el-checkbox v-model="node.checked" @change="setChange(node)"></el-checkbox>
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="closeForm" size="medium">取消</el-button>
          <el-button type="primary" size="medium" @click="onSubmit()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { setPermissions } from '@/api/user/role'
import { genTree  } from '@/api/user/node'

export default {
  name: "set_permissions",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      title: '设置权限',
      width: '1000px',
      form: {
        id: '',
        title: '',
        node_ids: []
      },
      formRules: {
        node_ids: [{required: true, message: '请选择权限', trigger: 'blur'}],
      },
      tree: [],
      list: [],
      updateKey: '',
      device: 1,
      loading: false,
      expand:true,
    }
  },
  methods: {
    open() {
      if (Object.keys(this.info).length > 0) {
        this.form.id = this.info.id
        this.form.title = this.info.title
        this.form.node_ids = this.info.node_ids
      }
      this.genTree()
    },
    genTree() {
      genTree({device: this.device, role_id: this.form.id}).then(res => {
        if (res.code == 0) {
          this.list = res.data
        }
      })
    },
    setChange(node) {
      if (this.form.node_ids.indexOf(node.id) == '-1') {
        this.form.node_ids.push(node.id)
      } else {
        this.form.node_ids.splice(this.form.node_ids.indexOf(node.id), 1)
      }
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          setPermissions(this.form).then(res => {
            if (res.code == 0) {
              this.$emit('callFn')
              this.closeForm()
            }
          })
        }
      })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children
      };
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      for (let i in this.form) {
        if (i != 'status') {
          this.form[i] = ''
        }
      }
    },
    handleCurrentChange(val) {
      this.id = val.id
      this.single = false
    },
  }
}
</script>

<style scoped lang="scss">
/deep/.el-dialog__body {
  padding-top: 0px;
}
/deep/.el-form-item {
 // margin-bottom:2px;
}
/deep/.el-form-item:last-child {
  margin-bottom: 10px;
}
.last_child {
  margin-top: 16px;
}
.item {
  display: flex;
  justify-content: space-between;
}
/deep/.el-tag {
  margin-right: 4px;
}
.el-icon-edit-outline {
  cursor: pointer;
}
</style>